<template>
  <div>
    <el-container :style="backgroundStyle">
      <el-col :span="6"></el-col>
      <el-col :span="12">
        <!-- 搜素区域 开始-->
        <el-card
          class="card-search"
          :body-style="{ padding: '0px' }"
          shadow="never"
        >
          <!-- LOGO 开始-->
          <el-image :src="logoUrl" class="img-logo"></el-image>
          <!-- LOGO 结束-->
          <!-- 搜索栏 开始-->
          <el-row style="margin-top: 30px">
            <el-input
              placeholder="请输入内容"
              v-model="searchTitle"
              class="search-input"
              @keyup.enter.native="searchPicture"
            >
            </el-input>
            <el-button icon="el-icon-search" @click="searchPicture"
              >搜索图片</el-button
            >
          </el-row>
          <!-- 搜索栏 结束-->

          <!-- 历史搜索 开始 -->
          <div class="card-history">
            历史搜索:
            <el-link>&nbsp;小猫咪跳高&nbsp;</el-link>
            <el-link>&nbsp;小狗练飞盘&nbsp;</el-link>
          </div>
          <!-- 历史搜索 结束 -->
        </el-card>
        <!-- 搜索区域 结束 -->
      </el-col>
      <el-col :span="6"></el-col>
    </el-container>
    <!-- 底部 -->
    <br />
    <el-container style="width: 100%">
      <el-col :span="2"></el-col>
      <el-col :span="20">
        精美合辑
        <el-container>
          <el-col :span="7">
            <ImageCard :imageUrl="imageUrl1" imageDetail="哈哈哈"></ImageCard>
          </el-col>
          <!-- 占位 --><el-col :span="2"></el-col>
          <el-col :span="7">
            <ImageCard :imageUrl="imageUrl1" imageDetail="哈哈哈"></ImageCard>
          </el-col>
          <!-- 占位 --><el-col :span="2"></el-col>
          <el-col :span="7">
            <ImageCard :imageUrl="imageUrl1" imageDetail="哈哈哈"></ImageCard>
          </el-col>
        </el-container>
        <el-container>
          <el-col :span="7">
            <ImageCard :imageUrl="imageUrl1" imageDetail="哈哈哈"></ImageCard>
          </el-col>
          <!-- 占位 --><el-col :span="2"></el-col>
          <el-col :span="7">
            <ImageCard :imageUrl="imageUrl1" imageDetail="哈哈哈"></ImageCard>
          </el-col>
          <!-- 占位 --><el-col :span="2"></el-col>
          <el-col :span="7">
            <ImageCard :imageUrl="imageUrl1" imageDetail="哈哈哈"></ImageCard>
          </el-col>
        </el-container>
      </el-col>
      <el-col :span="2"></el-col>
    </el-container>
  </div>
</template>

<script>
import ImageCard from "../components/ImageCard.vue";

export default {
  name: "Home",
  components: { ImageCard },
  data() {
    return {
      backgroundUrl: require("@/assets/background.jpg"),
      logoUrl: require("@/assets/logo.png"),
      // 搜索标题
      searchTitle: "",
      imageUrl1: require("@/assets/background.jpg"),
    };
  },
  methods: {
    // 搜索图片
    searchPicture() {
      this.$router.push({
        path: "/search",
        query: {
          detail: this.searchTitle,
          desc: false
        },
      });
    },
  },
  computed: {
    // 背景图样式
    backgroundStyle() {
      return {
        backgroundImage: `url(${this.backgroundUrl})`,
        backgroundSize: "cover",
        backgroundPosition: "center",
        width: "100%",
        height: "90vh",
      };
    },
  },
};
</script>

<style scoped>
/* 搜索框上面的LOGO */
.img-logo {
  width: 244px;
  height: 86px;
  margin: 0 auto;
  display: inline-block;
}
/* 搜索卡片 */
.card-search {
  text-align: center;
  margin-top: 20vh;
  height: 50vh;
  /* 让背景透明 */
  background-color: transparent;
  /* 去掉边框 */
  border: 0;
}
/* 搜索框 */
.search-input {
  padding-inline: 10px;
  padding: 0px;
  width: 75vh;
}
/* 历史搜索卡片 */
.card-history {
  margin-top: 10px;
}
</style>